<template>
  <div>
    <div class="app-container">

      <div class="filter-container">
      <el-input  v-model="query.title" placeholder="文章标题" class="filter-item" style="width: 200px;margin-right: 5px;" ></el-input>
        <el-cascader class="filter-item"
         v-model="query.classifyId"
         :options="mapClassifies"
         :props="{ expandTrigger: 'hover',value:'id',label:'name' }"
        ></el-cascader>
      <el-date-picker class="filter-item"
        v-model="query.createdAt" value-format="yyyy-MM-dd HH:mm:ss"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>

      <el-button style="margin-left: 10px" @click="queryRecords" type="primary" class="filter-item">查询</el-button>
      <el-button @click="reload" type="danger" class="filter-item">刷新</el-button>
      <el-button @click="handleDelete(undefined,undefined)" type="primary" class="filter-item">批量删除</el-button>
      <el-button @click="handleStatus(undefined,undefined,2)" type="primary" class="filter-item">批量下架</el-button>
      <el-button @click="handleTop(undefined,undefined,1)" type="primary" class="filter-item">批量置顶</el-button>
      </div>

      <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      v-horizontal-scroll="'always'"
      @selection-change="handleSelectionChange"
      >
    <el-table-column
      type="selection"
      width="55" />
    <el-table-column prop="id" label="ID" min-width="80" />
    <el-table-column prop="classify_name" label="分类" min-width="100" />
    <el-table-column prop="title" label="标题" min-width="250" />
    <el-table-column prop="key_word" label="关键字" min-width="100" />
    <el-table-column prop="description" label="描述" min-width="200" />
    <el-table-column prop="content" label="内容" min-width="200" />
    <el-table-column prop="cover_url" label="封面" min-width="100" >
      <template slot-scope="scope">
        <img v-if="scope.row.cover_url" class="table-img" :src="host+scope.row.cover_url">
      </template>
    </el-table-column>
    <el-table-column prop="see_num" label="阅读量" min-width="80" />
    <el-table-column prop="status_name" label="是否上架" min-width="100" />
    <el-table-column prop="is_top_name" label="是否置顶" min-width="100" />
    <!--<el-table-column prop="status" label="上架/下架" width="150" >
      <template slot-scope="scope">
        <el-switch
          v-model="scope.row.status"
          active-color="#409EFF"
          inactive-color="#909399"
          :active-value="1"
          :inactive-value="2"
          @change="changeSwitch(scope.row)">
        </el-switch>
      </template>
    </el-table-column>-->
    <!--<el-table-column prop="is_top" label="置顶" width="80" >
      <template slot-scope="scope">
        <el-switch
          v-model="scope.row.is_top"
          active-color="#409EFF"
          inactive-color="#909399"
          :active-value="1"
          :inactive-value="2"
          @change="changeSwitch(scope.row)">
        </el-switch>
      </template>
    </el-table-column>-->
    <el-table-column prop="sort" label="排序" min-width="80" >
      <template slot-scope="scope">
        <el-input @input="changeSwitch(scope.row)"  v-model="scope.row.sort" placeholder="请输入序号"></el-input>
      </template>
    </el-table-column>
    <el-table-column prop="created_at" label="创建时间" min-width="160" />
    <el-table-column fixed="right" label="操作" min-width="200">
      <template slot-scope="scope">
				<el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>

        <el-button v-if="scope.row.status==1" size="mini" type="text" @click="handleStatus(scope.$index, scope.row,2)">下架</el-button>
        <el-button v-else size="mini" type="text" @click="handleStatus(scope.$index, scope.row,1)">上架</el-button>

        <el-button v-if="scope.row.is_top==1" size="mini" type="text" @click="handleTop(scope.$index, scope.row,2)">取消置顶</el-button>
        <el-button v-else size="mini" type="text" @click="handleTop(scope.$index, scope.row,1)">置顶</el-button>

			</template>
    </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.page"
      :page-sizes="[5,10, 20, 100, 200]"
      :page-size="pagination.pageSize"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>

    </div>
  </div>
</template>

<script>

import { myGet, myPost } from '@/utils/myUtils'

const urlArticleAdd = '/guard/article/add'
const urlArticleLst = '/guard/article/lst?tree=1'
const urlArticleDel = '/guard/article/del'
const urlArticleChange = '/guard/article/change'
const urlArticleClassifyLst = '/guard/article/classify/lst?tree=1'

export default {


  data() {
    return {
      selectId:[],
      selectClassifyId:[],
      host:process.env.VUE_APP_HOST,
      listLoading:false,
      list:[],
      mapClassifies:[],
      query:{
        title:'',
        classifyId:[0],
        createdAt:[]
      },
      pagination:{
        page:1,
        pageSize:10,
        total:0,
      }
    }
  },
  methods: {

    reload(){
      Object.assign(this.$data.query,this.$options.data().query)
      Object.assign(this.$data.pagination,this.$options.data().pagination)
      this.getRecords()
    },

    queryRecords(){
      Object.assign(this.$data.pagination,this.$options.data().pagination)
      this.getRecords()
    },

    getRecords(){
      this.listLoading = true
      let params = Object.assign(this.query,this.pagination)
      myGet(urlArticleLst,params).then(res=>{
        this.listLoading = false
        if(res.status){
          this.list = res.data.records
          this.pagination.total = res.data.total
        }
      })
    },
    getArticleClassify(){
      myGet(urlArticleClassifyLst).then(res=>{
        if(res.status){
          this.mapClassifies = res.data.records
          this.mapClassifies.unshift({id:0,name:"全部"})
          console.log(this.mapClassifies)
          this.query.classifyId = [0]
        }
      })
    },
    handleEdit(index,row){
      let id = row.id
      this.$router.push(`/article/edit/${id}`)
    },

    handleDelete(index,row){
      if(typeof(row) == "undefined" ){
        if(this.selectId.length<=0){
          this.$message.error('请先选择项目！')
          return;
        }
      }
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = [];
        if(typeof(row) == "undefined" ){
          ids = this.selectId
        }else{
          ids = [row.id]
        }
        myGet(urlArticleDel,{ids}).then(res=>{
          if(res.status){
            this.$message.success(res.msg)
            this.getRecords()
          }
        })
      });
    },

    handleStatus(index,row,status){
      if(typeof(row) == "undefined" ){
        if(this.selectId.length<=0){
          this.$message.error('请先选择项目！')
          return;
        }
      }

      let tip = status==1?'确定要上架吗?':'确定要下架吗?';
      this.$confirm(tip, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = [];
        if(typeof(row) == "undefined" ){
          ids = this.selectId
        }else{
          ids = [row.id]
        }
        myPost(urlArticleChange, {
          status:status,
          ids:ids,
        }).then(res => {
          if(res.status){
            this.$message.success(res.msg)
            this.getRecords();
          }
        })
      });
    },

    handleTop(index,row,is_top){

      if(typeof(row) == "undefined" ){
        if(this.selectId.length<=0){
          this.$message.error('请先选择项目！')
          return;
        }
      }

      let tip = is_top==1?'确定要置顶吗?':'确定要取消置顶吗?';
      this.$confirm(tip, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        let ids = [];
        if(typeof(row) == "undefined" ){
          ids = this.selectId
        }else{
          ids = [row.id]
        }

        myPost(urlArticleChange, {
          //is_top:row.is_top,
          //up_down:row.up_down,
          is_top:is_top,
          ids:ids,
        }).then(res => {
          if(res.status){
            this.$message.success(res.msg)
            this.getRecords();
          }
        })
      });
    },

    changeSwitch(row){

      myPost(urlArticleAdd, {
        is_top:row.is_top,
        status:row.status,
        sort:row.sort,
        id:row.id,
      }).then(res => {
        if(res.status){
          this.$message.success(res.msg)
        }
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.selectId = [];
      val.forEach(item=>{
        this.selectId.push(item.id)
      })
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.pagination.page = 1
      this.getRecords()
    },
    handleCurrentChange(val) {
      this.pagination.page  = val
      this.getRecords();
    },
  },

  mounted() {
    this.getRecords()
    this.getArticleClassify()
  },
}
</script>

<style scoped>
  .table-img{
    width: 50px;
    height: 50px;
}
</style>
